<%--
  Created by IntelliJ IDEA.
  User: ASUS
  Date: 2020/5/27
  Time: 15:40
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <%@include file="/comm/head.jsp"%>
    <%@page isELIgnored="true" %>
</head>
<body>
<div id="root" style="padding:16px 80px">
    <h3>可编辑行<%--{{editIndex}}--%></h3>
    <card>
        <i-button  type="info" @click="add">添加一行</i-button>
    </card>
    <i-table :columns="columns1" :data="data1" border :height="300">

    </i-table>
</div>

<script>
    var _this;
   new Vue({
        el:"#root",
       created(){
          _this=this;
       },
       mounted(){
            _this.arr = [{
                id:1001,
                text:"河北石家庄"
            },
                {
                    id:1002,
                    text:"湖北武汉"
                }
            ];
       },
         data:{

             editObj:{
                 editIndex:-1,
                 editName:null,
                 editAge:null,
                 editAddress:null,
             },

             arr:[],
             columns1: [
                 {
                     title: '姓名',
                     key: 'name',
                    /* render: (h, params) => {
                         console.log(params)
                         if (params.row.$isEdit) {
                             return h('Input', {

                                 props: {
                                     type: "text",
                                     value: _this.editObj.editName
                                 },

                                 on: {
                                     "on-blur": event => {
                                         debugger
                                         params.row.name = event.target.value;
                                         this.$set(params.row, '$isEdit', false);
                                     },

                                 }
                             });
                         } else  {
                             return h('div', {
                                 on: {
                                     click: () => {
                                         this.$set(params.row, '$isEdit', true);
                                     },
                                 }
                             },params.row.name);
                         }
                     },*/

                     render(h,{row,index}){
                         if(index==_this.editObj.editIndex){
                             let vNodes=[
                                 h("i-input",{
                                     props:{value:_this.editObj.editName},
                                     on:{
                                         input:(val)=>{
                                             _this.editObj.editName=val;
                                         },
                                       /*  "on-blur": event => {
                                             console.log(event.target.value)
                                             row.name = event.target.value;*/
                                             // this.$set(row, '$isEdit', false);

                                      /*   'on-blur': (event: ) => {
                                             this.data[params.index].name = event.target.value;
                                         },*/
                                    /* }*/
                                 }})
                             ];
                             return h("div",vNodes)

                         }else{
                             return h("div",row.name);
                         }
                     }
                 },
                 {
                     title: '年龄',
                     key: 'age',
                     render(h,{row,index}){
                         if(index==_this.editObj.editIndex){
                             let vNodes=[
                                 h("i-input",{
                                     props:{value:_this.editObj.editAge},
                                     on:{
                                        /* 'on-blur':(event)=>{
                                             // console.log(event.target.value)
                                         }*/
                                         input:(val)=>{
                                             _this.editObj.editAge=val;
                                         }
                                     }
                                 })
                             ];
                             return h("div",vNodes)

                         }else{
                             return h("div",row.age);
                         }
                     }
                 },
                 {
                     title: '地址',
                     key: 'address',
                     render(h,{row,index}){
                         if(index==_this.editObj.editIndex){
                             let arr2=[];
                             for(let obj of _this.arr){
                                 var vnode=h("i-option",{
                                     props:{value:obj.text,key:obj.id},

                                 },obj.text);
                                 arr2.push(vnode);
                             }
                             let vNodes=[
                                 h("i-select",{
                                     props:{value:_this.editObj.editAddress},
                                     on:{
                                         input:(val)=>{
                                             _this.editObj.editAddress=val;
                                         },
                                         "on-change": event => {
                                             console.log(event.target.id)
                                             // event.target.value
                                         }
                                     }
                                 },arr2
                                 )
                             ];
                             return h("div",vNodes)

                         }else{
                             return h("div",row.address);
                         }
                     }
                 },
                 {
                     title:"操作",
                     render:(h,{row,index})=>{
                         // console.log("ddd"+_this.editIndex);
                         if(index!=_this.editObj.editIndex){
                        let update= h("i-button",
                            {props:{type:"primary"},
                            style:{marginRight:"20px"},
                                on:{
                                click:()=>{
                                   _this.editObj.editIndex = index;
                                   _this.editObj.editName = row.name;
                                   _this.editObj.editAddress=row.address;
                                   _this.editObj.editAge=row.age;
                                }

                                }
                            },
                            "修改");
                        let del= h("i-button",{props:{type:"error"}},"删除");
                        return h("div",[update,del]);

                     }else{
                             let queding= h("i-button",
                                 {props:{type:"primary"},
                                     style:{marginRight:"20px"},
                                     on:{
                                         click:()=>{
                                             _this.data1[index].name=_this.editObj.editName;
                                             _this.data1[index].address=_this.editObj.editAddress;
                                             _this.data1[index].age = _this.editObj.editAge;
                                             _this.editObj.editIndex=-1

                                         }

                                     }
                                 },
                                 "确定");
                             let quxiao= h("i-button",{props:{type:"error"}},"取消");
                             return h("div",[queding,quxiao]);
                         }
                     }
          /*       render(h){
                     return (
                         <div>
                             <i-button>修改</i-button>
                         </div>
                     )
                 }*/
                 }
             ],
             data1: [
                 {
                     name: 'John Brown',
                     age: 18,
                     address: 'New York No. 1 Lake Park',
                     date: '2016-10-03'
                 },
                 {
                     name: 'Jim Green',
                     age: 24,
                     address: 'London No. 1 Lake Park',
                     date: '2016-10-01'
                 },
                 {
                     name: 'Joe Black',
                     age: 30,
                     address: 'Sydney No. 1 Lake Park',
                     date: '2016-10-02'
                 },
                 {
                     name: 'Jon Snow',
                     age: 26,
                     address: 'Ottawa No. 2 Lake Park',
                     date: '2016-10-04'
                 }
             ],

         },
       methods:{
           add(){
               var addObj={};
               Object.assign(addObj,_this.editObj);//属性复制
               _this.data1.push(addObj);
             var index = _this.data1.length-1;
               _this.editObj.editIndex=index;
           }
       }
    })
</script>

</body>
</html>
